<script setup lang="ts">
import { onMounted, ref } from "vue"
import router from "@/router"
import type { UploadProps } from "element-plus"
import { ContactApi } from "@/api/crm"
import { watch } from "vue"

defineOptions({
  name: "ContactDetail"
})

const ContactDetail = ref()
const canEdit = ref(false)
const loading = ref(true)
let id = router.currentRoute.value.query as { id: string }
const detailSave = async () => {
  //   console.log(ContactDetail.value)
  let resp = await ContactApi.updateContactDetail(ContactDetail.value)
  console.log("###", resp.data)
  canEdit.value = false
}

onMounted(async () => {
  // 获取要展示的id
  //   let id = router.currentRoute.value.query as { id: string }
  //   console.log(id);
  let resp = await ContactApi.getContactDetail(id)
  // console.log(resp.data);
  ContactDetail.value = resp.data
  console.log(ContactDetail.value)
})

watch(
  ContactDetail,
  () => {
    loading.value = false
  }
  //   { immediate: true }
)

/**上传图片的接口 */
const imageUrl = ref("")
const BASE_API = import.meta.env.VITE_BASE_API
console.log(BASE_API)
const handleAvatarSuccess: UploadProps["onSuccess"] = (response, uploadFile) => {
  console.log(response)
  // imageUrl.value = URL.createObjectURL(uploadFile.raw!)
  imageUrl.value = response.data.url
}

const beforeAvatarUpload: UploadProps["beforeUpload"] = (rawFile) => {
  if (rawFile.type !== ("image/jpeg" && "image/png")) {
    ElMessage.error("图片需要为jpg或png格式")
    return false
  } else if (rawFile.size / 1024 / 1024 > 5) {
    ElMessage.error("图片大小不能超过5MB!")
    return false
  }
  return true
}
</script>

<template>
  <div class="layout-container">
    <el-card>
      <div v-if="loading">
        <el-skeleton :rows="3" animated />
      </div>
      <div class="body-form" v-else>
        <el-form :inline="true" :model="ContactDetail" label-width="90px">
          <el-form-item label="姓名：">
            <el-input v-model="ContactDetail.name" :readonly="!canEdit"></el-input>
          </el-form-item>
          <el-form-item label="手机号：">
            <el-input v-model="ContactDetail.cellphone" :readonly="!canEdit"></el-input>
          </el-form-item>
          <el-form-item label="工作单位：">
            <el-input v-model="ContactDetail.organization" :readonly="!canEdit"></el-input>
          </el-form-item>
          <el-form-item label="其他信息：">
            <el-input v-model="ContactDetail.other" :readonly="!canEdit" type="textarea" :rows="3"></el-input>
          </el-form-item>
          <el-form-item label="名片：">
            <!-- <el-input v-model="ContactDetail.namecard" :readonly="!canEdit"></el-input>
              -->
            <!-- 上传图片部分 -->
            <el-upload
              class="avatar-uploader"
              :action="`${BASE_API}/tool/tgimg_channel`"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
          </el-form-item>
        </el-form>
      </div>
      <div class="card-footer">
        <el-button type="info" @click="canEdit = true">修改</el-button>
        <el-button type="primary" @click="detailSave">保存</el-button>
      </div>
    </el-card>
    <!-- 相关联的沟通记录 -->
    <el-card style="margin-top: 15px"></el-card>
  </div>
</template>

<style lang="scss" scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.body-form {
  width: 80%;
  margin: 0 auto;
}
.card-footer {
  margin: 10px auto;
  display: flex;
  justify-content: center;
}
</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
